<template>
	<view class="box">
		<view class="context">
			<!-- 添加诊所 -->
			<form>
				<view class="userName">
					<label>诊所名称</label>
					<input type="text" placeholder="诊所名称" disabled v-model="list.service_title">
				</view>
				<view class="region">
					<label>地区</label>
					<picker mode="region" :disabled="jihuozhuangtai == 1 ? false : true" @change="bindRegionChange" :value="region">
						<view class="picker">
							{{region[0]}}{{region[1]}}{{region[2]}}
						</view>
					</picker>

				</view>
				<view class="detailedAddress">
					<label>详细地址</label>
					<input type="text" placeholder="请输入" :disabled="jihuozhuangtai == 1 ? false : true" v-model="list.address_title">
				</view>
				<view class="education">
					<label>诊所简介</label>
					<!-- <text class="educationTxt">{{list.synopsis}}</text> -->
					<input type="text" placeholder="请输入诊所简介" disabled v-model="list.synopsis">
				</view>

				<view class="clinicmaingraph">
					<view>
						<text>诊所主图(一张)</text>
					</view>
					<view v-if="list.img_url" class="images jiahaoImg">
						<image :src="list.img_url" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
						<view v-if="jiahaos  == 1" class="jiahao" @click="clinicmaingraph">+</view>
					</view>
				</view>

				<view class="picturedetails">
					<view>
						<text>详情图片(最多四张)</text>
					</view>
					<view v-if="list.image_url" class="images jiahaoImg xianqingtus">
						<view class="xianImg" v-for="(item,index) in picturedetailsImgList" :key="item.id">
							<image :src="item" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
							<!-- <icon v-if="activeIcon" class="clears" type="clear" size="18" @click="clears(index)" /> -->
						</view>
						<!-- 点了编辑之后才能出现 -->
						<view v-if="jiahaos  == 1" class="jiahao jiahaoTranlate" @click="picturedetailsImg">+</view>
					</view>
				</view>

				<view class="licence">
					<view>
						<text>医疗执业许可证(一张)</text>
					</view>
					<view v-if="list.licence_url" class="images">
						<image :src="list.licence_url" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
					</view>
				</view>
				<view class="business">
					<view>
						<text>营业执照(一张)</text>
						<text></text>
					</view>
					<view v-if="list.trading_url" class="images">
						<image :key="item.id" :src="list.trading_url" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
					</view>
				</view>

				<!-- 联系人 -->
				<text class="contacts">联系人</text>
				<view class="contact">
					<label>联系人</label>
					<input type="text" :disabled="jihuozhuangtai == 1 ? false : true" placeholder="请输入" v-model="list.user_name">
				</view>
				<view class="telnumber">
					<label>手机号</label>
					<input type="text" :disabled="jihuozhuangtai == 1 ? false : true" placeholder="请输入" v-model="list.user_phone">
				</view>
			</form>

			<view class="add">
				<text v-if="showActivation == 1" class="dibusuananniuNoActivation" @click="show">预览</text>
				<text v-if="showActivation == 0" class="dibusuananniuNoActivation" @click="calce">取消</text>
				<text class="dibusuananniuActivation" :class="jihuozhuangtai == 1 ? 'jihuo': ''" @click="editShopServices">{{editShop}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			// 获取oos上传
			this.uploadOosMethos();

			this.list = this.$store.state.userinfo;
			this.region = this.$store.state.userinfo.area_title.split(",");
			this.picturedetailsImgList = this.list.image_url.split(",");
			// this.image_urls = JSON.parse(this.list.image_url);
			this.img_url = this.list.img_url;
		},
		data() {
			return {
				// 显示详情图片功能
				picturedetailsImgList: null,

				list: null,
				// 详情图片
				image_urls: [],
				img_url: null,
				jihuozhuangtai: 0,

				region: ['浙江省', '杭州市', '滨江区'],

				// 编辑
				jiahaos: 0,
				editShop: "编辑",

				// 显示删除按钮
				activeIcon: 0,
				// 判断是否显示按钮了
				showActivation: 1,

				// 上传的图片设置
				host: null,
				OSSAccessKeyId: null,
				dir: null,
				policy: null,
				signature: null,
			};
		},
		methods: {
			// 获取oos的地址
			async uploadOosMethos() {
				let fileGetUrl = await this.$myrequest({
					url: `File/get`
				});
				this.host = fileGetUrl.data.data.host;
				this.OSSAccessKeyId = fileGetUrl.data.data.accessid;
				this.dir = fileGetUrl.data.data.dir;
				this.policy = fileGetUrl.data.data.policy;
				this.signature = fileGetUrl.data.data.signature;
			},

			// 地区选择器
			bindRegionChange(e) {
				if (this.jihuozhuangtai == 1) {
					this.region = e.detail.value
				};
			},

			show() {
				this.jihuozhuangtai = 0;
				let id = this.$store.state.userinfo.id;
				uni.navigateTo({
					url: `../../clinicDetails11/clinicDetails11?id=${id}`
				})
			},
			calce() {
				this.showActivation = 1;
				this.editShop = "编辑";
				this.jihuozhuangtai = 0;
				if (this.jiahaos == 0) {
					this.jiahaos = 1;
					this.activeIcon = 1;
					return false;
				} else {
					this.jiahaos = 0;
					this.activeIcon = 0;
				};
			},

			// ==诊所主图==
			async clinicmaingraph() {
				let self = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						this.list.img_url = res.tempFilePaths;

						let fileName = `${Date.now()}${res.tempFilePaths[0].substr(-4)}`;
						let key = `${self.dir}${fileName}`;
						self.img_url = `${self.host}/${self.dir}${fileName}`;

						uni.uploadFile({
							url: self.host,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								key,
								policy: self.policy,
								OSSAccessKeyId: this.OSSAccessKeyId,
								signature: this.signature
							},
							success: res => {
								console.log(self.img_url);
							}
						});

					}
				});
			},
			// --诊所主图--

			async editShopServices() {
				this.showActivation = 0;
				this.editShop = "完成";
				this.jihuozhuangtai = 1;

				if (this.jiahaos == 0) {
					this.jiahaos = 1;
					this.activeIcon = 1;
					return false;
				} else {
					this.jiahaos = 0;
					this.activeIcon = 0;
				};
				// 只有完成的状态和有图片下才可以提交
				if (this.editShop == "编辑") {
					return false;
				};

				// 做个倒计时
				let timeOut = 3;
				uni.showToast({
					title: "图片上传中",
					icon: "none",
					duration: timeOut * 1000
				})
				let setId = setInterval(() => {
					timeOut = --timeOut;
					if (timeOut == 0) {
						// 把要做的内容放到里面来了吧
						if (this.image_urls.length == 0) {
							this.image_urls = this.picturedetailsImgList;
						};
						let openids = this.$store.state.openid;
						let id = this.$store.state.userinfo.id;
						let datas = {
							openid: openids,
							id: id,
							img_url: this.img_url,
							user_name: this.list.user_name,
							user_phone: this.list.user_phone,
							area: this.region.join(","),
							address: this.list.address_title,
							content: this.list.synopsis,
							image_url: this.image_urls.join(),
							code: ""
						};

						uni.request({
							url: 'https://chat.assessgeek.com/api/Service/editShopService',
							data: datas,
							success: (res) => {
								if (res.data.code == 200) {
									this.showActivation = 1;
									this.editShop = "编辑";
									this.jihuozhuangtai = 0;
									this.$store.commit("storePersonalInformation", res.data.data);
								};
							}
						});
						// 把要做的内容放到里面来了吧
						clearInterval(setId);
					};
				}, 1 * 1000);
				// 做个倒计时

			},
			// 详情图的接口
			async picturedetailsImg() {
				let self = this;
				this.image_urls = [];
				uni.chooseImage({
					count: 4,
					success: res => {
						this.picturedetailsImgList = res.tempFilePaths;
						for (let [keys, value] of Object.entries(res.tempFilePaths)) {

							let fileName = `${Date.now()+1}${value.substr(-4)}`;
							let key = `${self.dir}${fileName}`;
							self.image_urls.push(`${self.host}/${self.dir}${fileName}`);

							uni.uploadFile({
								url: self.host,
								filePath: value,
								name: 'file',
								formData: {
									key,
									policy: self.policy,
									OSSAccessKeyId: this.OSSAccessKeyId,
									signature: this.signature
								},
								success: res => {}
							});

						};
					},
				});
			},

			clears(index) {
				let emptyArr = [];
				if (this.image_urls.length === 1) {
					uni.showToast({
						title: "项目详情图必填",
						icon: "none"
					})
					return false;
				};
				for (let [key, value] of Object.entries(this.image_urls)) {
					console.log(key);
					if (index != key) {
						emptyArr.push(value);
					};
				};
				this.image_urls = emptyArr;
			},

		}
	}
</script>

<style lang="scss">
	.context {
		padding-bottom: 135rpx;

		form {
			width: 750rpx;
			display: block;
			overflow: hidden;
			margin-bottom: 20rpx;

			.userName,
			.region,
			.detailedAddress,
			.contact,
			.telnumber,
			.verification {
				width: calc(100vw - 60rpx);
				height: 100rpx;
				background-color: rgba(247, 248, 252, 1);
				margin: 20rpx auto;
				border-radius: 10rpx;
				padding-left: 20rpx;
				@include shuipingchuijuzhong;

				label {
					flex: 1;
					color: #B0AFB2;
				}

				>input {
					flex: 1;
					padding-right: 30rpx;
					text-align: right;
				}

				.inputs {
					padding-right: 0rpx !important;
				}
			}
		}

		.contacts {
			display: inline-block;
			color: RGBA(173, 173, 173, 1);
			padding-left: 60rpx;
			margin: 10rpx 0;
			color: #424244;
		}

		.verificationCode {
			display: inline-block;
			height: 44rpx;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(51, 211, 190, 1);
			padding: 0 10rpx;
			box-sizing: border-box;
			margin: 0 40rpx;
			border-radius: 20rpx;
		}

		.licence,
		.clinicmaingraph,
		.doorPhoto,
		.picturedetails,
		.business {
			width: calc(100vw - 60rpx);
			margin: 20rpx auto;
			border-radius: 10rpx;

			>view {
				&:first-of-type {
					border-radius: 10rpx;
					height: 100rpx;
					background-color: rgba(247, 248, 252, 1);
					padding: 20rpx;
					@include chuizhilianduan;
					color: #B0AFB2;
				}
			}

			.images {
				background-color: rgba(247, 248, 252, 1);
				border-radius: 0 0 10rpx 10rpx;

				image {
					margin-left: 20rpx;
				}
			}
		}
	}

	.add {
		@include dibusuananniu;
	}

	.jiahaoImg {
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.jiahao {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		border: 2rpx dashed #C6C6CA;
		margin-left: 20rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 40rpx;
		color: #BBBCBD;
		margin-top: 0rpx;
	}

	.jiahaoTranlate {
		transform: translateY(-10rpx);
	}

	.education {
		width: calc(100vw - 60rpx);
		height: 200rpx;
		background-color: rgba(247, 248, 252, 1);
		margin: 20rpx auto;
		border-radius: 10rpx;
		padding-left: 20rpx;

		>label {
			margin-top: 25rpx;
			display: inline-block;
			width: 100%;
			color: #B0AFB2;
		}

		>input {
			width: 100%;
		}
	}

	.jihuo {
		background: linear-gradient(90deg, rgba(96, 232, 205, 1), rgba(45, 209, 188, 1)) !important;
		box-shadow: 3rpx 4rpx 20rpx 4rpx rgba(15, 170, 150, 0.1) !important;
		border-radius: 49rpx !important;
		font-family: PingFang SC !important;
		font-weight: bold !important;
		color: rgba(255, 255, 255, 1) !important;
	}

	// 删除小按钮
	.xianImg {
		position: relative;
	}

	.xianqingtus {
		display: flex;
	}

	.clears {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.region {
		padding-right: 30rpx;
	}
</style>
